<template>
  <div class="deductTaxTable">
    <div class="title">
      <h3>抵扣金统计</h3>
    </div>
    <div class="key-search">
      <el-form ref="form" :rules="rules" :model="BindForm" label-width="80px" label-position="left">
        <el-form-item label="手机号:" prop="phone">
          <el-col :span="24">
            <el-input v-model="BindForm.phone" placeholder="请输入手机号" maxlength="11" class="cus-input" clearable />
          </el-col>
        </el-form-item>
        <el-form-item prop="type" label="类型:">
          <el-col :span="24">
            <el-radio-group v-model="BindForm.type" :disabled="row != null && row !== undefined" @change="changedType">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="0">发放规则</el-radio-button>
              <el-radio-button label="1">消耗规则</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item prop="ruleId" label="规则:">
          <el-col v-if="!row" :span="24">
            <DeductRuleSelect ref="deductRuleSelect" v-model="BindForm.ruleId" />
          </el-col>
          <el-col v-else :span="24">
            <span>{{ row.name }}</span>
          </el-col>
        </el-form-item>
        <el-form-item label="商品:" prop="goods">
          <el-col :span="24">
            <select-goods ref="selectGoods" v-model="BindForm.goods" />
          </el-col>
        </el-form-item>
        <el-form-item prop="storeId" label="门店:">
          <el-col :span="24">
            <store-select ref="storeSelect" v-model="BindForm.storeId" field="id" />
          </el-col>
        </el-form-item>
        <el-form-item prop="time" label="统计时段:">
          <el-col :span="24">
            <el-date-picker
              v-model="BindForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="center"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            />
            <el-button plain style="margin-left:10px" @click="setWeek">近一周</el-button>
            <el-button plain @click="setMonth">近一月</el-button>
            <el-button plain @click="setYear">近一年</el-button>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">筛选</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row v-if="summaryData" :gutter="20" style="margin-bottom: 30px;">
      <el-col :span="8">
        <div class="ibox">
          <div class="ibox-info">
            <div class="ibox-title">可用抵扣金</div>
            <div class="ibox-desc">{{ summaryData.couldUseTotal }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="ibox">
          <div class="ibox-info">
            <div class="ibox-title">累计发放抵扣金</div>
            <div class="ibox-desc">{{ summaryData.cumulativeDisTotal }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="ibox">
          <div class="ibox-info">
            <div class="ibox-title">累计消耗抵扣金</div>
            <div class="ibox-desc">{{ summaryData.cumulativeUseTotal }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="ele-table">
      <el-table :data="BindTable" border max-height="600" :empty-text="loading ? '数据加载中' : (isSearch ? '未找到相关的统计信息' : '暂无统计信息')">
        <el-table-column
          label="用户ID"
          prop="userId"
          align="center"
          min-width="80"
          :resizable="false"
          fixed="left"
        />
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
          min-width="80"
          :resizable="false"
        />
        <el-table-column
          label="手机号"
          prop="phone"
          align="center"
          width="130"
          :resizable="false"
        />
        <el-table-column
          label="可用抵扣金"
          prop="couldUseTotal"
          align="center"
          min-width="120"
          :resizable="false"
        />
        <el-table-column
          label="累计发放抵扣金"
          prop="cumulativeDisTotal"
          align="center"
          min-width="120"
          :resizable="false"
        />
        <el-table-column
          label="累计消耗抵扣金"
          prop="cumulativeUseTotal"
          align="center"
          min-width="120"
          :resizable="false"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          fixed="right"
          width="80"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="$router.push({name:'deductTaxDetail', query: { p: $ed(scope.row) }})">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <div />
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
  </div>
</template>

<script>
import StoreSelect from '../../../components/StoreSelect/index'
import SelectGoods from '../../../components/SelectGoods/index'
import { ruleUserStatic } from '@/api/market'
import DeductRuleSelect from '../../../components/DeductRuleSelect/index'
export default {
  name: 'DeductTaxTable',
  components: { DeductRuleSelect, SelectGoods, StoreSelect },
  data() {
    var validatePhone = (rule, value, callback) => {
      var Regx = /^1[3-9]\d{9}$/
      if (value && value.length > 0 && !Regx.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      row: null,
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      isSearch: false,
      summaryData: null,
      BindForm: {
        ruleId: null,
        type: 'all',
        phone: null,
        goods: null,
        time: null,
        storeId: null
      },
      BindTable: [],
      rules: {
        phone: [
          { validator: validatePhone, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    const vm = this
    this.row = this.$dd(this.$route.query.p)
    if (this.row) {
      vm.BindForm.type = this.row.type
      vm.BindForm.ruleId = this.row.id
    }
    vm.loadTableData()
  },
  methods: {
    changedType() {
      const vm = this
      vm.BindForm.ruleId = null
      vm.$refs.deductRuleSelect.refresh(vm.BindForm.type)
    },
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this

      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    setWeek() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setMonth() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setYear() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 364)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.reloadTableData()
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.loadTableData()
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.BindTable = []
      vm.loadTableData()
    },
    loadTableData() {
      const vm = this

      vm.isSearch = false

      const data = {
        page: vm.page,
        limit: vm.limit
      }

      if (vm.BindForm.ruleId && vm.BindForm.ruleId > 0) {
        data['id'] = vm.BindForm.ruleId
        vm.isSearch = true
      }

      if (vm.BindForm.phone && vm.BindForm.phone.length > 0) {
        data['phone'] = vm.BindForm.phone
        vm.isSearch = true
      }

      if (vm.BindForm.type !== 'all') {
        data['type'] = parseInt(vm.BindForm.type)
        vm.isSearch = true
      }

      if (vm.BindForm.storeId && vm.BindForm.storeId > 0) {
        data['storeId'] = parseInt(vm.BindForm.storeId)
        vm.isSearch = true
      }

      if (vm.BindForm.goods) {
        data['goodsId'] = parseInt(vm.BindForm.goods.goodsId)
        vm.isSearch = true
      }

      if (vm.BindForm.time && vm.BindForm.time.length === 2) {
        data['startTime'] = vm.BindForm.time[0]
        data['endTime'] = vm.BindForm.time[1]
        vm.isSearch = true
      }

      vm.loading = true
      ruleUserStatic(data).then(res => {
        vm.loading = false
        vm.total = res.data.data.total
        if (res.data.data.couldUseTotal !== undefined && res.data.data.cumulativeDisTotal !== undefined && res.data.data.cumulativeUseTotal !== undefined) {
          vm.summaryData = {
            couldUseTotal: res.data.data.couldUseTotal,
            cumulativeDisTotal: res.data.data.cumulativeDisTotal,
            cumulativeUseTotal: res.data.data.cumulativeUseTotal
          }
        } else {
          vm.summaryData = null
        }
        vm.BindTable = res.data.data.data ? res.data.data.data : []
      }).catch(res => {
        vm.loading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .deductTaxTable{
    padding: 30px;

    .ibox {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
      .ibox-info {
        .ibox-title {
          font-size: 18px;
        }
        .ibox-desc {
          margin-top: 10px;
          font-size: 24px;
          font-weight: bold;
        }
      }
      .ibox-icon {
        font-size: 24px;
      }
    }

    .key-search {
      margin-top: 30px;
      padding: 20px 30px;
      padding-bottom: 0px;
      margin-bottom: 30px;
      border: 1px solid #eeeeee;
      .cus-input {
        max-width: 400px;
      }
    }

    .key-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    .ele-table,
    .pagination {
      margin-bottom: 30px;
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

  }
</style>
